<template>
  <div class="app-container">
    <!-- <PageTitle title="订单列表" ref="pageTitle" v-model="listQuery.city" @onChange="changeCity" /> -->
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="$refs.edit.handleCreate()"
        >新增景点</el-button
      >
    </div>
    <div class="filter-container">
      <el-input
        style="width: 160px"
        class="filter-item"
        placeholder="请输入景区名称"
        v-model="listQuery.attraction_name"
      ></el-input>

      <el-button class="filter-item" size="mini" plain @click="handleReset">重置</el-button>
      <el-button class="filter-item" size="mini" type="primary" @click="handleFilter"
        >查询</el-button
      >
    </div>
    <Table :data="list" :columns="columns" :loading="listLoading">
      <template v-slot:charging_mode>
        <el-table-column label="收费模式" width="120" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.charging_mode === 'time'
                ? '分时计费'
                : scope.row.charging_mode === 'daily'
                ? '按日计费'
                : '一口价计费'
            }}</span>
          </template>
        </el-table-column>
      </template>
      <template v-slot:rent_desc>
        <el-table-column label="租金" width="200" showOverflowTooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.rent_desc.join(',') }}</span>
          </template>
        </el-table-column>
      </template>
      <template v-slot:free_time>
        <el-table-column label="免费时间" width="100" align="center">
          <template slot-scope="scope"> {{ scope.row.free_time }}分钟 </template>
        </el-table-column>
      </template>
      <template v-slot:voice_version>
        <el-table-column label="语音包版本" width="140" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.voice_version" class="primary">{{
              scope.row.voice_version
            }}</span>
            <span v-else class="red">未上传语音包</span>
          </template>
        </el-table-column>
      </template>
      <template v-slot:device_version>
        <el-table-column label="讲解器固件版本" width="120" align="center">
          <template slot-scope="scope">
            <span class="primary">{{ scope.row.firmware_version.device_version }}</span>
          </template>
        </el-table-column>
      </template>
      <template v-slot:main_board_version>
        <el-table-column label="主控板固件版本" width="120" align="center">
          <template slot-scope="scope">
            <span class="primary">{{ scope.row.firmware_version.main_board_version }}</span>
          </template>
        </el-table-column>
      </template>
      <template v-slot:bin_board_version>
        <el-table-column label="仓板固件版本" width="120" align="center">
          <template slot-scope="scope">
            <span class="primary">{{ scope.row.firmware_version.bin_board_version }}</span>
          </template>
        </el-table-column>
      </template>

      <template v-slot:action>
        <el-table-column label="操作" minWidth="240" fixed="right">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <i class="el-icon-edit table-action" @click="$refs.edit.handleEdit(scope.row.id)"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <i class="el-icon-delete table-action" @click="handleDel(scope.row.id)"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="语音详情" placement="top">
              <i class="table-action" @click="handleVoice(scope.row)">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 -4 26 26"
                  class="icon-svg"
                >
                  <path
                    d="M2 22v-2q1.15 0 2.275-.15t2.2-.55q-1.15-.575-1.812-1.662T4 15.275V13h4v-3h3.375L8.1 3.45l1.8-.9l3.275 6.55q.5 1-.075 1.95t-1.7.95H10v1q0 .825-.587 1.413T8 15H6v.275q0 .875.538 1.538T7.9 17.7l.3.075q1 .25 1.125 1.25t-.775 1.5q-1.5.825-3.162 1.15T2 22m14.3-2.85l-1.425-1.4q.525-.525.825-1.213t.3-1.487t-.3-1.487t-.825-1.213l1.425-1.425q.8.8 1.25 1.862T18 15.05t-.45 2.25t-1.25 1.85M19.125 22L17.7 20.575q1.075-1.075 1.688-2.487T20 15.05q0-1.65-.612-3.05T17.7 9.525L19.125 8.1q1.35 1.35 2.113 3.125T22 15.05q0 2.025-.763 3.813T19.126 22"
                  />
                </svg>
              </i>
            </el-tooltip>
            <el-popover width="130" trigger="hover" popper-class="popover-class">
              <ul class="popover-ul">
                <li @click="$refs.firmware.handleOpen(scope.row.id, 'device')">讲解器固件更新</li>
                <li @click="$refs.firmware.handleOpen(scope.row.id, 'bin_board')">仓板固件更新</li>
                <li @click="$refs.firmware.handleOpen(scope.row.id, 'main_board')">主板固件更新</li>
              </ul>

              <el-button type="text" slot="reference" size="mini">
                <i class="table-action" style="margin-right: 5px">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="20 -36 256 256"
                    class="icon-svg"
                  >
                    <path
                      d="M224 128a96 96 0 0 1-161.89 69.82a8 8 0 1 1 11-11.64a80 80 0 1 0-1.68-114.75A439 439 0 0 0 61.35 82l16.31 16.34A8 8 0 0 1 72 112H32a8 8 0 0 1-8-8V64a8 8 0 0 1 13.66-5.66L50 70.7c3.22-3.49 6.54-7 10.06-10.55A96 96 0 0 1 224 128m-96-56a8 8 0 0 0-8 8v48a8 8 0 0 0 3.88 6.86l40 24a8 8 0 1 0 8.24-13.72L136 123.47V80a8 8 0 0 0-8-8"
                    /></svg></i
              ></el-button>
            </el-popover>
            <el-tooltip class="item" effect="dark" content="导入景点" placement="top">
              <i class="el-icon-upload2 table-action" @click="handleUpload(scope.row.id)"></i>
            </el-tooltip>
            <el-button type="text" size="mini" @click="handleData(scope.row)">景点数据</el-button>
          </template>
        </el-table-column>
      </template>
    </Table>
    <div class="pagination-container">
      <pagination
        :total="count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        @pagination="fetchData"
      />
    </div>
    <Edit ref="edit" />
    <Firmware ref="firmware" />
  </div>
</template>

<script>
import { getList, del } from '@/api/attraction'
import Edit from './components/Edit'
import Firmware from './components/Firmware'
export default {
  name: 'AttractionIndex',
  components: { Edit, Firmware },
  data() {
    return {
      list: null,
      count: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        attraction_name: ''
      },
      columns: [
        {
          type: 'index',
          align: 'center',
          label: '序号',
          width: '50'
        },
        {
          label: '景点名称',
          width: '160',
          prop: 'name',
          showOverflowTooltip: true
        },
        {
          label: '机柜数量',
          width: '100',
          prop: 'cabinet_num',
          align: 'center'
        },
        {
          label: '收费模式',
          slot: 'charging_mode'
        },

        {
          label: '押金',
          width: '100',
          prop: 'deposit',
          align: 'center'
        },
        {
          label: '租金',
          slot: 'rent_desc'
        },
        {
          label: '免费时间',
          slot: 'free_time'
        },
        {
          label: '景点地址',
          width: '160',
          prop: 'address',
          showOverflowTooltip: true
        },
        {
          label: '语音包版本',
          slot: 'voice_version'
        },
        {
          label: '讲解器固件版本',
          slot: 'device_version'
        },

        {
          label: '主控板固件版本',
          slot: 'main_board_version'
        },
        {
          label: '仓板固件版本',
          slot: 'bin_board_version'
        },
        {
          label: '操作',
          slot: 'action'
        }
      ]
    }
  },

  created() {
    this.fetchData()
  },
  mounted() {},
  methods: {
    // 获取数据
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then((res) => {
        this.list = res.data.list_data
        this.count = res.data.paging.count
        this.listLoading = false
      })
    },

    // 筛选
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    /**
     * @description:
     * @return {*}
     */
    handleReset() {
      this.listQuery = {
        page: 1,
        size: 10,
        attraction_name: ''
      }
      this.fetchData()
    },
    /**
     * @description: 订单详情
     * @param {*} sn
     * @return {*}
     */
    handleDetail(sn, can_consume) {
      this.$router.push({ path: `/orders/detail/${sn}`, query: { can_consume } })
    },
    /**
     * @description: 删除
     */
    handleDel(uuid) {
      this.$confirm('确认删除该项目吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del(uuid).then(() => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          })
        })
        .catch(() => {})
    },
    handleUpload(id) {
      this.$router.push({
        path: `/attraction/uploadList`,
        query: {
          id
        }
      })
    },
    handleData(row) {
      this.$router.push({
        path: `/attraction/dataList`,
        query: {
          id: row.id,
          name: row.name
        }
      })
    },
    /**
     * @description: 语音详情
     */
    handleVoice(row) {
      this.$router.push({
        path: `/attraction/voiceDirs`,
        query: {
          attraction_id: row.id,
          attraction_name: row.name
        }
      })
    },
    // 固件更新
    handleUpdate(row) {
      this.$refs.edit.open(row)
    }
  }
}
</script>
<style scoped lang="less">
.filter-container {
  justify-content: flex-start !important;
  flex-wrap: wrap;
}
.el-button {
  margin-bottom: 5px;
  margin-left: 0;
  margin-right: 5px;
}
.icon-svg {
  fill: #333;
  &:hover {
    fill: #1677ff;
  }
}
.red {
  color: #dc4a4a;
}
.primary {
  color: #1677ff;
}
.popover-ul {
  padding: 0;
  margin: 0;
  padding: 10px 0;
  li {
    list-style: none;
    line-height: 36px;
    cursor: pointer;
    padding: 0 5px;
    &:hover {
      background-color: #f0f3ff;
      color: #1677ff;
    }
  }
}
</style>
